<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>题库专家</title>
  <link rel="stylesheet" href="../assect/css/util.css">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="../assect/js/pagination.js"></script>
  <!-- <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> -->
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <span>
      <div class="menu-icon"></div>
    </span>
    <p class="outLogin">退出登陆</p>
  </div>
  <!-- 侧边导航 -->
  <div id="canvas-warp">
    <div class="nav">
      <ul class="nav-ul">
        <li class="nav-font">
          <p>激活码管理</p>
          <ul class="son-nav">
            <a href="../index.html">
              <li>激活码列表</li>
            </a>
            <a href="./activeRecord.html">
              <li>激活记录</li>
            </a>
          </ul>
        </li>
        <li class="nav-font">
          <p>用户管理</p>
          <ul class="son-nav">
            <a href="./userList.html">
              <li>用户列表</li>
            </a>
            <a href="./feedback.html">
              <li>用户反馈</li>
            </a>
            <a href="#">
              <li>登陆日志</li>
            </a>
            <a href="./commentList.html">
              <li>评论列表</li>
            </a>
          </ul>
        </li>
        <li class="nav-font">
          <p>订单管理</p>
          <ul class="son-nav">
            <a href="./userOrder.html">
              <li>用户订单</li>
            </a>
            <a href="./agentOrder.html">
              <li>代理订单</li>
            </a>
          </ul>
        </li>
      </ul>
    </div>
    <div class="mask"></div>
  </div>
  <!-- 内容区域 -->
  <div class="content">
    <div class="content-box">
      <div class="title">登录日志</div>
      <div class="content-box-con">
        <!-- 昵称 -->
        <div>
          <span>用户名</span>
          <input type="text" placeholder="用户昵称">
        </div>
        <!-- 手机号码 -->
        <div>
          <span>手机号码</span>
          <input type="text" placeholder="手机号码">
        </div>
      </div>
      <div class="content-box-btn btn-new">
        <button>筛选</button>
      </div>
      <div class="content-box-table">
        <div class="table">
          <table>
            <tr>
              <th>用户名</th>
              <th>联系电话</th>
              <th>IP地址</th>
              <th>手机型号</th>
              <th>登录时间</th>
              <th>操作</th>
            </tr>
            <tr>
              <td>tiku_7988069893</td>
              <td>15940579880</td>
              <td> 139.213.247.210 </td>
              <td>wap</td>
              <td> 2019-05-30 17:01:36 </td>
              <td>
                <button>删除</button>
              </td>
            </tr>
            <tr>
              <td>tiku_7988069893</td>
              <td>15940579880</td>
              <td> 139.213.247.210 </td>
              <td>wap</td>
              <td> 2019-05-30 17:01:36 </td>
              <td>
                <button>删除</button>
              </td>
            </tr>
            <tr>
              <td>tiku_7988069893</td>
              <td>15940579880</td>
              <td> 139.213.247.210 </td>
              <td>wap</td>
              <td> 2019-05-30 17:01:36 </td>
              <td>
                <button>删除</button>
              </td>
            </tr>
            <tr>
              <td>tiku_7988069893</td>
              <td>15940579880</td>
              <td> 139.213.247.210 </td>
              <td>wap</td>
              <td> 2019-05-30 17:01:36 </td>
              <td>
                <button>删除</button>
              </td>
            </tr>

          </table>
        </div>
        <!-- 翻页导航 -->
        <div class="page-container"></div>
      </div>


    </div>
  </div>
  <!-- 分页 -->
  <script>
    const pageSize = 4
    const dataCount = 16
    const pager = new Pagination('.page-container', {
      pageSize: pageSize,
      autoLoad: true,
      toPage: function (index, _pageSize) {
        // 设置记录总数，用于生成分页HTML内容
        if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)

        // 根据页码以及分页大小生成html内容
        let pageListHtml = ''
        for (var i = 0; i < (_pageSize || pageSize); i++) {
          pageListHtml += `
            <div class="col-md-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card - ${index * (_pageSize || pageSize) + i + 1}</h5>
                  <p class="card-text">card-text,card-text,card-text,card-text</p>
                </div>
              </div>
            </div>
          `
        }
        $('.page-list').html(pageListHtml)
      }
    })
  </script>
  <script>
    $(function () {
      $('#canvas-warp').hide();
      $('.son-nav').hide();
      // 点击图标，显示导航
      $('.menu-icon').click(function () {
        $('#canvas-warp').toggle(300);
      })
      // 点击遮罩，隐藏导航
      $('.mask').click(function () {
        $('#canvas-warp').toggle(300);
      })
      $('.nav-font').click(function (event) {
        $(this).children('.son-nav').toggle(300);
        $(this).siblings().children('.son-nav').hide(300);
      });
      // 退出登录
      $('.outLogin').click(function () {
        $(location).attr('href', '../login.html');
      })
    })



  </script>
</body>

</html>